<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>购物车</title>
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/cart.css"/>
	<script src="__PUBLIC__/js/jquery-1.7.2.min.js"></script>
</head>
<body>
	<!--头部用户名-->
	<div id="top-user-box">
		<div id="top-user">
			<div class="user-out">
				<if value="$hd.session.uid&&$hd.session.user">
				<p class="wel">欢迎您,</p>
				<a href="{|U:'Center/index'}" class="username">{$hd.session.user}</a>
				<a href="{|U:'Common/out'}" class="out">[退出]</a>
				<p class="line">|</p>
				<a href="" class="query">订单查询</a>
				<else/>
				<p class="wel">欢迎来到聚美,</p>
				<a href="{|U:'Login/index'}" class="out" style="margin-left:10px">请登录</a>
				<a href="{|U:'Reg/index'}" class="out" style="margin-left:10px">快速注册</a>
				</if>
			</div>
		</div>
	</div>
	<!--头部用户名结束-->
	<!--网页logo开始-->
	<div id="home-logo-box">
		<div class="home-logo">
			<a href="" class="logo"></a>
			<p class="cart-order"></p>
		</div>
	</div>
	<!--网页logo结束-->
	<if value="!$hd.session.cart.goods">
	<!--购物车没有商品-->
	<div id="cartnull">
		<span class="logo"></span>
		<p class="title">
			您的购物车中没有商品，请先去挑选心爱的商品吧！
		</p>
		<p class="text">
			<span>您可以</span>
			<a href="{|U:'Index/index'}" class="home">返回首页</a>
			<span>挑选喜欢的商品。</span>
		</p>
	</div>
	<!--购物车没有商品结束-->
	<else/>
	<!--包邮开始-->
	<div id="time">
		<p class="baoyou">
			<span>包邮</span>
			聚美发货商品满2件或299元包邮,新用户首单全场满39元包邮 
		</p>
		<ul class="real">
			<li><span class="logo1"></span>真品防伪码</li>
			<li><span class="logo2"></span>30天无条件退货</li>
			<li><span class="logo3"></span>美妆满2件或299元包邮</li>
		</ul>
	</div>
	<!--包邮结束-->
	<!--购物车开始-->
	<div id="shop-cart">
		<div class="top-box">
			<div class="top">
				<ul class="top-title">
					<li class="cart-good">
						<p class="title">
							<input type="checkbox" name="" id="" class="good-all" />
							聚美优品发货
						</p>
					</li>
					<li class="cart-money">
						聚美价（元）
					</li>
					<li class="cart-num">
						数量
					</li>
					<li class="cart-little">
						小计（元）
					</li>
					<li class="cart-make">
						操作
					</li>
				</ul>
			</div>
		</div>
		<div class="shop-good-box">
			<foreach from="$hd.session.cart.goods" key="$k" value="$v">
				<div class="shop-good">
					<ul>
						<li class="cart-good">
							<input type="checkbox" name="" id="" class="good-choose" />
							<div class="good">
								<a href="" class="good-img">
									<img src="__ROOT__/{$v.options.logo}" alt="" />
								</a>
								
								<p class="good-title-box">
									<a href="{|U:'Content/index',array('gid'=>$v['id'])}" class="good-title">{$v.name}</a>
								</p>
								<p style="margin-top: 10px;font-size:11px">颜色: {$v.options.color}</p>
								<p style="margin-top: 5px;font-size:11px">大小: {$v.options.size}</p>
							</div>
						</li>
						<li class="cart-money">
							<div class="money-box">
								<p class="new-money">{$v.price}</p>
								<p class="old-money">{$v.options.old_price}</p>
							</div>
						</li>
						<li class="cart-num">
							<div class="num-box">
								<span class="lose num-btn">-</span>
								<input type="text" name="" class="num" value="{$v.num}" key="{$k}" onkeyup="value=value.replace(/[^1234567890-]+/g,'')"/>
								<span class="plus num-btn">+</span>
							</div>
						</li>
						<li class="cart-little">
							<div class="money-box">
								<p class="new-money">{$v.total}.00</p>
							</div>
						</li>
						<li class="cart-make">
							<a href="javascript:;"></a>
						</li>
					</ul>
				</div>
			</foreach>
			<script type="text/javascript">
			$(function(){
				$('.num-box .lose').click(function() {
					var num = $(this).parent('.num-box').find('.num').val();
					if (num>0) {
						$(this).parent('.num-box').find('.num').val(num-1);
					}
				});
				$('.num-box .plus').click(function() {
					var num = $(this).parent('.num-box').find('.num').val();
					if (num<10) {
						$(this).parent('.num-box').find('.num').val(num*1+1);
					}else{
						if (num=10) {
							alert('您最多能购买10件该商品');
							$(this).parent('.num-box').find('.num').val(10);
						};
					};
				});
				// 点击删除后删除当前商品
				$('.cart-make a').click(function() {
					var sid = $(this).parents('ul').find('.num').attr('key');
					var index = $(this);
					$.ajax({
						url: "{|U:'Cart/ajax_update'}",
						type: 'POST',
						dataType: 'json',
						data: {sid:sid,num:0},
						success:function(data){
							if (!data['goods'][sid]) {
								var now_money = 0;
								index.parents('.shop-good').slideUp(1000);
							}
							index.parents('.shop-good').find('.cart-little .new-money').html(now_money);
							$('.money-all span').html('￥'+data['total']);
							$('.good-money span').html('￥'+data['total']);
							$('.good-num span').html(data['total_rows']);
						}
					})
				});
				// 手动输入后最多10件，小数转整
				$('.num').blur(function() {
					var num = Math.floor($(this).val());
					var sid = $(this).attr('key');
					var index = $(this);
					if (num<0) {
						num = num*-1;
					};
					if (num>10) {
						num = 10;
						alert('您最多能购买10件该商品');
					};
					$(this).val(num);
					$.ajax({
						url: "{|U:'Cart/ajax_update'}",
						type: 'POST',
						dataType: 'json',
						data: {sid:sid,num:num},
						success:function(data){
							if (!data['goods'][sid]) {
								var now_money = 0;
								index.parents('.shop-good').slideUp(1000);
							}else{
								var now_money = data['goods'][sid]['total'];
							};
							index.parents('.shop-good').find('.cart-little .new-money').html(now_money);
							$('.money-all span').html('￥'+data['total']);
							$('.good-money span').html('￥'+data['total']);
							$('.good-num span').html(data['total_rows']);
						}
					})
				});
				// ajax改变购物车数据
				$('.num-btn').click(function() {
					var num = $(this).parent('.num-box').find('.num').val();
					var sid = $(this).parent('.num-box').find('.num').attr('key');
					var index = $(this);
					$.ajax({
						url: "{|U:'Cart/ajax_update'}",
						type: 'POST',
						dataType: 'json',
						data: {sid:sid,num:num},
						success:function(data){
							if (!data['goods'][sid]) {
								var now_money = 0;
								index.parents('.shop-good').slideUp(1000);
							}else{
								var now_money = data['goods'][sid]['total'];
							};
							index.parents('.shop-good').find('.cart-little .new-money').html(now_money);
							$('.money-all span').html('￥'+data['total']);
							$('.good-money span').html('￥'+data['total']);
							$('.good-num span').html(data['total_rows']);
						}
					})
				});
				// 全选
				$('.good-all').click(function() {
					$('input[type=checkbox]').prop('checked', $('.good-all').prop('checked'));
				});
				$('#good-all').click(function() {
					$('input[type=checkbox]').prop('checked', $('#good-all').prop('checked'));
				});
				// 全选结束
				$('.good-del').click(function() {
					if ($('input:checked').length>=1) {
						data = '';
						$.each($('input:checked'), function(k, v) {
							 var sid= $(v).parents('.shop-good').find('.num').attr('key');
							 if (sid) {
							 	data += sid+',';
							 };
						});
						$.ajax({
							url: "{|U:'Cart/ajax_choose'}",
							type: 'POST',
							dataType: 'json',
							data: {sid:data},
							success:function(data){
								$.each($('input:checked'), function(k, v) {
									 var sid= $(v).parents('.shop-good').find('.num').attr('key');
									 if (sid) {
									 	$(v).parents('.shop-good').slideUp(1000);
									 };
								});
								$('.money-all span').html('￥'+data['total']);
								$('.good-money span').html('￥'+data['total']);
								$('.good-num span').html(data['total_rows']);
							}
						})
					};
				});
			})
			</script>
		</div>
		<div class="bottom-box">
			<p class="money-all">
				商品金额：
				<span>￥{$hd.session.cart.total}.00</span>
			</p>
		</div>
	</div>
	<!--购物车结束-->
	<!--去结算开始-->
	<div id="cart-pay">
		<div class="left-box">
			<div class="left">
				<label for="good-all" class="check">
					<input type="checkbox" name="" id="good-all" />
					全选
				</label>
				<a href="{|U:'Index/index'}" class="go-on">继续购物</a>
				<span>|</span>
				<a href="javascript:;" class="good-del">清空选中商品</a>
			</div>
			<div class="right">
				<div class="good-num">
					共 <span>{$hd.session.cart.total_rows}</span> 件商品
				</div>
				<div class="good-money">
					商品应付总额：<span style="font-size: 18px;">￥{$hd.session.cart.total}.00</span>
				</div>
			</div>
		</div>
		<div class="right-box">
			<a href="{|U:'Pay/index'}" class="go-pay">去结算</a>
		</div>
	</div>
	<!--去结算结束-->
	</if>
	<!--底部开始-->
	<div id="bottom-box">
		<div id="bottom-text">
			<p class="title">© 2013 北京创锐文化传媒有限公司 Jumei.com 保留一切权利。客服热线：400-123-8888</p>
			<p class="title-s">
				京公网安备 11010102001226 号 | 
				<a href="" class="num">京ICP证111033号</a>
				 | 食品流通许可证 SP1101051110165515（1-1） | 
				 <a href="" class="last">营业执照</a>
			</p>
		</div>
		<ul id="bottom-logo">
			<li><a href="" class="logo1"></a></li>
			<li><a href="" class="logo2"></a></li>
			<li><a href="" class="logo3"></a></li>
			<li><a href="" class="logo4"></a></li>
			<li><a href="" class="logo5"></a></li>
		</ul>
	</div>
	<!--底部结束-->
</body>
</html>